<template>
  <div><MyView :modelValue="modelValue" @action="handleAction" /></div>
</template>
      
<script>
import MyView from "./view.vue";
import ActionHandlerChainJS from "./action_handler_chain";
import ModelHolderJS from "./model_holder";
import GetterJS from "@/js/getter";

function nop() {}

function isFile(actionEvent) {
  let item = actionEvent.item;
  if (item == null) {
    return false;
  }
  let mod = item.mode + "";
  let ir = mod.indexOf("r");
  let id = mod.indexOf("d");
  return ir > 0 && id < 0;
}

function isDir(actionEvent) {
  let item = actionEvent.item;
  if (item == null) {
    return false;
  }
  let mod = item.mode + "";
  return mod.indexOf("d") == 0;
}

function prepareFQueryResult(vo) {
  let g = GetterJS.NewGetter(vo);
  let items = g.Get("fquery.items", ".", []);
  let tt = g.Get("fquery.types", ".", {}); // type-table
  for (let i in items) {
    let item = items[i];
    let typeinfo = tt[item.type];
    if (typeinfo == null) {
      typeinfo = {};
    }
    item.type_info = typeinfo;
    item.selected = false;
  }
}

export default {
  name: "files-mvc",

  components: { MyView },

  computed: {
    wd() {
      let vo = this.modelValue;
      let h = ModelHolderJS.New(vo);
      let wkdir = h.GetWD();
      if (wkdir == null || wkdir == "") {
        wkdir = this.initLocation;
      }
      return wkdir;
    },
  },

  data() {
    return {};
  },

  methods: {
    fetch({ location }) {
      if (location == null || location == "") {
        location = this.initLocation;
      }
      let uri = location;
      let ref = this.wd;
      let method = "POST";
      let url = "/api/v1/fquery";
      let data = {
        fquery: {
          ref,
          uri,
        },
      };
      let p = this.$store.dispatch("axios/execute", { method, url, data });
      p.then((resp) => {
        let vo = resp.data;
        this.updateVO(vo);
      }).catch(() => {});
      return p;
    },

    updateVO(vo) {
      prepareFQueryResult(vo);
      this.$emit("update:modelValue", vo);
    },

    handleAction(p) {
      this.$emit("action", p);
    },

    execute(actionEvent) {
      let chain = ActionHandlerChainJS.New(actionEvent);

      chain.Handle({ action: "open", accept: isDir }, (ae) => {
        this.openDir(ae);
      });

      chain.Handle({ action: "open", accept: isFile }, (ae) => {
        this.openFile(ae);
      });

      chain.Handle({ action: "navigate" }, (ae) => {
        this.nav2(ae);
      });

      chain.Finally((ae) => {
        this.logUnhandledAction(ae);
      });
    },

    logUnhandledAction(p) {
      let j = JSON.stringify(p, null, "\t");
      console.warn("unhandled action: " + j);
    },

    nav2(ae) {
      let location = ae.location;
      this.fetch({ location });
      console.log("nav to [" + location + "]");
    },

    openFile(ae) {
      let item = ae.item;
      let name = item.name;
      console.log("open file: " + name);
      nop(item);
    },

    openDir(ae) {
      let item = ae.item;
      let name = item.name;
      nop(item);
      let location = item.uri;
      if (location == "" || location == null) {
        location = "./" + name;
      }
      this.fetch({ location });
      console.log("open dir: " + name);
    },
  },

  mounted() {
    if (this.autoLoad) {
      let location = this.initLocation;
      this.fetch({ location });
    }
  },

  unmounted() {},

  props: {
    autoLoad: { type: Boolean, default: true },

    modelValue: { type: Object },

    initLocation: { type: String, default: "file:///~" },
  },
};
</script>
      